/** 
 * 公共底部导航
*/ 
function fixBottomNav(navName="home"){
    // 创建div
    const div = document.createElement('div')
    // 添加类名
    div.className = `footer`;
    // 添加html内容
    div.innerHTML = `
            <a href="./home.html" class="nav-item ${navName === 'home' ?  'active' : ''}">
                <i class="iconfont icon-shouye1"></i>
                <span>首页</span>
            </a>
            <a href="./running.html"  class="nav-item ${navName === 'sport' ?  'active' : ''}">
                <i class="iconfont icon-bianzubeifen"></i>
                <span>运动</span>
            </a>
            <a href="./follow.html"  class="nav-item ${navName === 'follow' ?  'active' : ''}">
                <i class="iconfont icon-pintu"></i>
                <span>圈子</span>
            </a>
            <a href="./mine.html"  class="nav-item ${navName === 'mine' ?  'active' : ''}">
                <i class="iconfont icon-wode"></i>
                <span>我的</span>
            </a>
    `

    // 将div追加到body中
    document.body.append(div)
    // console.log(div);
}

/**
 *跑步 骑行 课程训练
*/ 

 function sportTopNav(sportName = "running"){
    //  创建一个div
    const div = document.createElement('div')
    //添加类名
    div.className = 'sport-header-nav'
    // 添加html内容
    div.innerHTML =`
        <a href="./running.html"><span class="${sportName === 'running' ?  'active' : ''}">跑步</span></a>
        <a href="./ride.html"><span class="${sportName === 'ride' ?  'active' : ''}">骑行</span></a>
        <a href="./classTrain.html"><span class="${sportName === 'classTrain' ?  'active' : ''}">课程训练</span></a>  
    `
    // 将div追加到body中
    document.body.prepend(div)
    // console.log(div);
 }
/**
 *关注 附近 收藏 个人动态
*/ 

function ringNav(ringName = "follow"){
    //  创建一个div
    const div = document.createElement('div')
    //添加类名
    div.className = 'head dpflex'
    // 添加html内容
    div.innerHTML =`
    <a href="./follow.html"><p class="${ringName === 'follow' ? 'text':''}">关注</p></a>
    <a href="./nearby.html"><p class="${ringName === 'nearby' ? 'text':''}">附近</p></a>
    <a href="./have.html"><p class="${ringName === 'have' ? 'text':''}">收藏</p></a>
    <a href="./increase.html"><p class="${ringName === 'increase' ? 'text':''}">个人动态</p></a>
    <div class="add">添加 +</div>
    `
    // 将div追加到body中
    document.body.prepend(div)
    // console.log(div);
 }

// 导出对象
module.exports = {
    fixBottomNav,
    sportTopNav,
    ringNav
}